<template>
  <el-container direction="vertical">

    <navMenu width="100%"></navMenu>
    <el-container direction="horizontal">
      <el-aside width="280px" height="100%">
        <sideBar class="menu" page-index="3-1" open-index="3"></sideBar>
      </el-aside>
      <el-main>
        <el-card>
          <div>
            <h2>老人人数变化图</h2>
            <div id="chart_example"></div>
          </div>
          <div>
            <h2>老人年龄段统计图</h2>
            <div id="chart_example2"></div>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </el-container>

</template>


<script>
import sideBar from "@/components/sideBar";
import navMenu from "@/components/navMenu";
import * as echarts from 'echarts'

export default {
  components: {sideBar, navMenu},
  data() {
    return {}
  },
  mounted() {
    let this_ = this;
    let myChart = echarts.init( document.getElementById( 'chart_example' ) );
    let option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985' }
        }
      },
      legend: {
        data: ['员工人数']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%', right: '4%', bottom: '3%', containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',],
          axisTick: {
            alignWithLabel: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
         {
          name: '老人人数', type: 'line', stack: '总量',
          label: {
            normal: {
              show: true, position: 'top'
            }
          }, areaStyle: {normal: {}}, data: [5, 10, 3, 5, 2, 6, 10, 6, 8, 5, 7, 11]
        }
      ]
    };
    myChart.setOption( option );

    let myChart2 = echarts.init(document.getElementById('chart_example2'));
    // 绘制图表
    myChart2.setOption({
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: 'vertical',
        bottom: 'bottom',
        data: ['20-30岁','30-40岁','40-50岁','50-60岁','60岁以上']
      },
      series : [
        {
          name: '年龄段',
          type: 'pie',
          radius : '55%',
          center: ['50%', '50%'],
          data:[
            {value:3, name:'20-30岁'},
            {value:2, name:'30-40岁'},
            {value:6, name:'40-50岁'},
            {value:4, name:'50-60岁'},
            {value:2, name:'60岁以上'}
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
    window.addEventListener( 'resize', function () {
      myChart.resize()
      myChart2.resize()
    } );

  },
  methods: {},
  watch: {},
  created() {

  }
}
</script>
<style scoped>
h2 {
  text-align: center;
  padding: 30px;
  font-size: 18px;
}

#chart_example {
  width: 50%;
  height: 300px;
  border: 1px solid #000000;
  margin: 0 auto;
}
#chart_example2 {
  width: 50%;
  height: 300px;
  border: 1px solid #000000;
  margin: 0 auto;
}
</style>
